<template>
  <div class="AbnormalOrders">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="活动编号" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['activityNumber']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="设备编号" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['equipmentNumber']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="代理商" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['agent']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="创建时间" :label-col="{ span: 5 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['creationTime']"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="16" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="findPageAbnormalOrderList($event)">查询</a-button>
            <a-button type="dashed" style="margin:0 2%" @click="listExport()">导出</a-button>
            <a-button @click="handleReset()">重置</a-button>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p>规则说明：</p>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p style="font-size:13px;color:gray;">1.异常订单模块是有系统主动帮您进行异常订单甄别，帮你止损的模块</p>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p
              style="font-size:13px;color:gray;"
            >2.异常订单为系统发现订单中有未知商品等异常，暂时还未向用户进行扣费的订单，待您点击编辑按钮，按照操作流程处理完后，系统将从新进行处理扣费。</p>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p
              style="font-size:13px;color:gray;"
            >3.为了保证用户的体验，如果异常单 7 天未进行处理则系统将按照未知或未修改价格自动进行提交向用户扣费。</p>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%">
      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane tab="待处理" key="1">
          <a-table
            :columns="columns"
            :dataSource="data"
            :pagination="pagination"
            @change="handleTableChange"
            :rowKey="record => record.id"
          >
            <template slot="serialNumber" slot-scope="text,record,index">
              <span>{{index+1}}</span>
            </template>
            <template slot="anomalousCause" slot-scope="text,record">
              <span>{{record.abnormalType==1?"识别出未知商品":''}}</span>
            </template>
            <template slot="status" slot-scope="text,record">
              <span>{{record.debugStatus==1?"待处理":record.debugStatus==2?"处理中":record.debugStatus==3?"处理完成":''}}</span>
            </template>
            <template slot="isOvertime" slot-scope="text,record">{{record.isOvertime==1?'是':'否'}}</template>
            <template slot="operation" slot-scope="text,record">
              <div class="blue" @click="detailsInfo(text, record)">详情</div>
              <div
                class="blue"
                @click="handleAbnormalOrder(text,record)"
              >{{record.status==3?'':'审核'}}</div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab="已处理" key="2" forceRender>
          <a-table
            :columns="columnsYet"
            :dataSource="dataYet"
            :pagination="paginationYet"
            @change="TableYet"
            :rowKey="record => record.id"
          >
            <template slot="serialNumber" slot-scope="text,record,index">
              <span>{{index+1}}</span>
            </template>
            <template slot="anomalousCause" slot-scope="text,record">
              <span>{{record.abnormalType==1?"识别出未知商品":''}}</span>
            </template>
            <template slot="status" slot-scope="text,record">
              <span>{{record.debugStatus==1?"待处理":record.debugStatus==2?"处理中":record.debugStatus==3?"处理完成":''}}</span>
            </template>
            <template slot="isOvertime" slot-scope="text,record">{{record.isOvertime==1?'是':'否'}}</template>
            <template slot="operation" slot-scope="text,record">
              <span class="blue" @click="detailsInfo(text, record)">详情</span>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "serialNumber",
    scopedSlots: { customRender: "serialNumber" },
    align: "center"
  },
  {
    title: "活动ID",
    dataIndex: "eventId",
    scopedSlots: { customRender: "activityId" },
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "creationTime" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "devCode",
    scopedSlots: { customRender: "facilityNumber" },
    align: "center"
  },
  {
    title: "所属商家",
    dataIndex: "agentName",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "异常原因",
    dataIndex: "abnormalType",
    scopedSlots: { customRender: "anomalousCause" },
    align: "center"
  },
  {
    title: "订单编号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "orderNumber" },
    align: "center"
  },
  {
    title: "状态",
    dataIndex: "debugStatus",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "是否超时",
    dataIndex: "isOvertime",
    scopedSlots: { customRender: "isOvertime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

const columnsYet = [
  {
    title: "序号",
    dataIndex: "serialNumber",
    scopedSlots: { customRender: "serialNumber" },
    align: "center"
  },
  {
    title: "活动ID",
    dataIndex: "eventId",
    scopedSlots: { customRender: "activityId" },
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "creationTime" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "devCode",
    scopedSlots: { customRender: "facilityNumber" },
    align: "center"
  },
  {
    title: "代理商",
    dataIndex: "agentName",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "异常原因",
    dataIndex: "abnormalType",
    scopedSlots: { customRender: "anomalousCause" },
    align: "center"
  },
  {
    title: "订单编号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "orderNumber" },
    align: "center"
  },
  {
    title: "状态",
    dataIndex: "debugStatus",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "是否超时",
    dataIndex: "isOvertime",
    scopedSlots: { customRender: "isOvertime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

const columnsLogistics = [
  {
    title: "包裹",
    dataIndex: "parcel",
    scopedSlots: { customRender: "parcel" },
    align: "center"
  },
  {
    title: "商品数/数量",
    dataIndex: "goodsNumber",
    scopedSlots: { customRender: "goodsNumber" },
    align: "center"
  },
  {
    title: "物流方式",
    dataIndex: "logisticsMode",
    scopedSlots: { customRender: "logisticsMode" },
    align: "center"
  },
  {
    title: "物流公司",
    dataIndex: "logisticsCompany",
    scopedSlots: { customRender: "logisticsCompany" },
    align: "center"
  },
  {
    title: "物流单号",
    dataIndex: "trackingNumber",
    scopedSlots: { customRender: "trackingNumber" },
    align: "center"
  }
];
const data = [
  {
    key: "1"
  }
];

const dataYet = [
  {
    key: "1"
  }
];

const dataLogistics = [
  {
    key: 1
  }
];
export default {
  name: "AbnormalOrders",
  data() {
    return {
      form: this.$form.createForm(this),
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      paginationYet: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      visible: false,
      columnsLogistics,
      dataLogistics,
      columnsYet,
      dataYet: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    //重置方法
    handleReset() {
      this.form.resetFields();
      this.startTime="";
      this.endTime="";
    },
    callback(key) {
      if (key) {
        this.handleReset();
      }
      if (key == 1) {
        this.findPageAbnormalOrderList();
      }
      if (key == 2) {
        this.processedOrderList();
      }
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      
      this.findPageAbnormalOrderList();
    },
    TableYet(pagination, filters, sorter) {
      const pager = { ...this.paginationYet };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.paginationYet = pager;
    
      this.processedOrderList();
    },

    // 点击详情跳页传值
    detailsInfo(text, record) {
      var orderId = record.id;
      this.$store.commit("orderId", orderId);
      this.$router.push({
        path: "/home/orderadmin/abnormalorders/abnormaldetails"
      });
    },

    // 异常订单列表--待处理
    findPageAbnormalOrderList($event) {
      if($event){
        this.pagination.current=1
      }
      var values = this.form.getFieldsValue();
      if (values.creationTime == undefined) {
        values.creationTime == undefined;
      } else {
        this.startTime = this.$moment(values.creationTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = this.$moment(values.creationTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(this.baseUrl + "/order/findPageAbnormalOrderList", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          agentName: values.agent,
          eventId: values.activityNumber,
          devCode: values.equipmentNumber,
          endTime: this.endTime,
          startTime: this.startTime,
          debugStatus: 2
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        });
    },

    // 异常订单列表--已处理
    processedOrderList($event) {
      if($event){
         this.paginationYet.current=1;
      }
      var values = this.form.getFieldsValue();
      if (values.creationTime == undefined) {
        values.creationTime == undefined;
      } else {
        this.startTime = this.$moment(values.creationTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = this.$moment(values.creationTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(this.baseUrl + "/order/findPageAbnormalOrderList", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.paginationYet.current,
          pageSize: this.paginationYet.pageSize,
          agentName: values.agent,
          eventId: values.activityNumber,
          devCode: values.equipmentNumber,
          endTime: this.endTime,
          startTime: this.startTime,
          debugStatus: 3
        })
        .then(response => {
          console.log(response);
          this.dataYet = response.data.data.list;
          this.paginationYet.total = response.data.data.total;
          this.paginationYet.pageSize = response.data.data.pageSize;
          this.paginationYet.current = response.data.data.pageNum;
        });
    },

    // 代理商库存导出
    listExport() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/order/exportAbnormalOrder",
          {
            loginToken: this.$store.state.loginToken,
            pageNum: this.pagination.current,
            pageSize: this.pagination.pageSize,
            agentName: values.agent,
            eventId: values.activityNumber,
            devCode: values.equipmentNumber,
            endTime: this.endTime,
            startTime: this.startTime,
            debugStatus: 2
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          // console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "异常订单表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        });
    },

    // 处理异常订单
    handleAbnormalOrder(text, record) {
      var values = this.form.getFieldsValue();
      this.axios({
        method: "post",
        url: this.baseUrl + "/order/handleAbnormalOrder",
        data: {
          loginToken: this.$store.state.loginToken,
          orderId: record.id,
          authorType: 1
        }
      }).then(res => {
        // console.log(res);
        if (res.data.code == 0) {
          this.$message.info("已审核");
          this.findPageAbnormalOrderList();
        }
      });
    }
  },
  created() {
    this.findPageAbnormalOrderList();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.AbnormalOrders {
  width: 100%;
}
</style>
